<template>
    <userDialog
        v-model="visible"
        dialogTitle="查看用户组"
        width="880px"
        @handleCloseDialog="close"
    >
        <template v-slot:userDiagContent>
            <dialogFormContent v-for="item in formInfo" :title="item.title">
                <template #form_info="{ isShowInfoFold }">
                    <infoList
                        v-if="isShowInfoFold && item.infoList.length > 0"
                        :infoList="item.infoList"
                    ></infoList>

                    <div
                        class="table_wrap"
                        v-if="isShowInfoFold && item.tableTitle"
                    >
                        <el-table
                            max-height="250"
                            :data="item.tableData"
                            border
                            class="tableClass"
                            :header-cell-style="{
                                color: '#222222',
                                height: '46px',
                            }"
                            :cell-style="{
                                color: '#606266',
                            }"
                            :row-style="{ height: '65px' }"
                        >
                            <el-table-column
                                v-for="(ele, index) in item.tableTitle"
                                :prop="ele.prop"
                                :label="ele.label"
                            />
                        </el-table>
                    </div>

                    <div
                        class="creatInfo"
                        v-if="isShowInfoFold && item.title === '权限信息'"
                    >
                        <p v-for="(item, index) in createdInfo">
                            <span>{{ item.label }}:</span>
                            <span>{{ item.value }}</span>
                        </p>
                    </div>
                </template>
            </dialogFormContent>

            <div class="confirmBtn">
                <el-button type="primary" @click="close()"> 关闭 </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
import {
    getInfoList,
    formTitleList,
} from "@/views/system/userGroupManager/index";
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const props = defineProps({
    viewUserGroupRes: {
        required: false,
        default: () => [] as any,
    },
});

// 用户组信息  用户组成员  权限信息
const formInfo = computed(() => {
    let arr = formTitleList.map((item: any) => {
        return {
            title: item,
            infoList: getInfoList(props.viewUserGroupRes, item),
            tableData: getTableData(props.viewUserGroupRes, item),
            tableTitle: getTableTitle(item),
        };
    });
    return arr.filter((item: any) => {
        return item.title !== "创建信息";
    });
});

// 创建信息
const createdInfo = computed(() => {
    return getInfoList(props.viewUserGroupRes, "创建信息");
});
// 表格信息
const getTableData = (data: any, title: any) => {
    if (title === "权限信息") {
        return data.list;
    }
    if (title === "用户组成员") {
        return data.user_list;
    }
};

const getTableTitle = (title: any) => {
    if (title === "权限信息") {
        return [
            {
                prop: "type",
                label: "平台",
            },
            {
                prop: "menu_level1",
                label: "一级菜单",
            },
            {
                prop: "menu_level2",
                label: "二级菜单",
            },
            {
                prop: "operation",
                label: "数据及操作权限",
            },
        ];
    }
    if (title === "用户组成员") {
        return [
            {
                prop: "username",
                label: "用户名称",
            },
            {
                prop: "realname",
                label: "真实姓名",
            },
            {
                prop: "phone",
                label: "手机号",
            },
            {
                prop: "type_name",
                label: "用户角色",
            },
        ];
    }
};

function close() {
    visible.value = false;
}
</script>

<style lang="scss" scoped>
.creatInfo {
    @include flexLayout;
    flex-wrap: wrap;
    background: #ecf4ff;
    border-radius: 2px;
    padding: 13px 16px;
    margin-top: 13px;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    p {
        margin-left: 20px;
        span {
            margin-left: 10px;
        }
        :first-child {
            margin-left: 0px;
        }
    }
    :first-child {
        margin-left: 0px;
    }
}

.confirmBtn {
    margin-top: 20px;
    @include flexLayout;
    .el-button {
        padding: 10px 42px;
    }
}
</style>
